{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '留言样式'])}
<style>
    .lyear-message-list {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(77, 82, 89, 0.05);
    }
    .lyear-message-list > li {
        border-bottom: 1px solid rgba(77, 82, 89, 0.05);
        margin-bottom: 10px;
    }
    .lyear-message-list .lyear-message-item .lyear-message-item {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .lyear-message-list li:last-child .lyear-message-item {
        padding-bottom: 0px;
    }
    .lyear-message-form {
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        padding-top: 10px;
    }
    .lyear-message-list .lyear-message-form {
        padding-bottom: 10px;
    }
    .lyear-message-form .form-control {
        margin: 0px 10px;
    }
    .lyear-message-form .form-control:focus {
        box-shadow: none;
    }
    .lyear-message-form .mdi {
        font-size: 20px;
        color: #4d5259;
    }
    .message-btn-close {
        display: none;
    }
    </style>
    <div class="row">

        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
            
              <p>比如这里是文章内容</p>
            <ul class="list-unstyled lyear-message-list">
              <li>
                <div class="d-flex lyear-message-item">
                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-7.png" class="avatar-box avatar-md rounded-circle" alt="七娃"></a>
                  <div class="flex-grow-1 ms-2">
                    <p>
                      <a href="#!"><strong>七娃</strong></a>
                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='5'>回复</a>
                      <time class="text-muted" datetime="2018-07-14 20:00">3 分钟前</time>
                    </p>
                    <p>再吵全给你们收进葫芦里面去。</p>
                  </div>
                </div>
              </li>
              
              <li>
                <div class="d-flex lyear-message-item">
                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" class="avatar-box avatar-md rounded-circle" alt="大娃"></a>
                  <div class="flex-grow-1 ms-2">
                    <p>
                      <a href="#!"><strong>大娃</strong></a>
                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='2'>回复</a>
                      <time class="text-muted" datetime="2018-07-14 20:00">26 分钟前</time>
                    </p>
                    <p>您个瓜娃子，谁让你这么弱的，要力量没力量啊。</p>
                    <ul class="list-unstyled">
                      <li>
                        <div class="d-flex lyear-message-item">
                          <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-2.png" class="avatar-box avatar-md rounded-circle" alt="二娃"></a>
                          <div class="flex-grow-1 ms-2">
                            <p>
                              <a href="#!"><strong>二娃</strong></a>
                              <a href="#!" class="text-muted ms-1 reply-btn" data-id='7'>回复</a>
                              <time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
                            </p>
                            <p>谢大哥。</p>
                          </div>
                        </div>
                      </li>
                    </ul>
      
                  </div>
                </div>
              </li>
    
              <li>
                <div class="d-flex lyear-message-item">
                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-3.png" class="avatar-box avatar-md rounded-circle" alt="三娃"></a>
                  <div class="flex-grow-1 ms-2">
                    <p>
                      <a href="#!"><strong>三娃</strong></a>
                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='2'>回复</a>
                      <time class="text-muted" datetime="2018-07-14 20:00">2 小时前</time>
                    </p>
                    <p>像我一样，钢筋铁骨，怕过谁。</p>
                    
                    <ul class="list-unstyled">
                      <li>
                        <div class="d-flex lyear-message-item">
                          <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-4.png" class="avatar-box avatar-md rounded-circle" alt="四娃"></a>
                          <div class="flex-grow-1 ms-2">
                            <p>
                              <a href="#!"><strong>四娃</strong></a>
                              <a href="#!" class="text-muted ms-1 reply-btn" data-id='3'>回复</a>
                              <time class="text-muted" datetime="2018-07-14 20:00">5 分钟前</time>
                            </p>
                            <p>三哥，你甭吹牛了，饶痒痒你怕不怕。</p>
                            
                            <ul class="list-unstyled">
                              <li>
                                <div class="d-flex lyear-message-item">
                                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-3.png" class="avatar-box avatar-md rounded-circle" alt="三娃"></a>
                                  <div class="flex-grow-1 ms-2">
                                    <p>
                                      <a href="#!"><strong>三娃</strong></a>
                                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='4'>回复</a>
                                      <time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
                                    </p>
                                    <p>我看你的皮是痒痒了。</p>
                                  </div>
                                </div>
                              </li>
                                
                              <li>
                                <div class="d-flex lyear-message-item">
                                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-5.png" class="avatar-box avatar-md rounded-circle" alt="五娃"></a>
                                  <div class="flex-grow-1 ms-2">
                                    <p>
                                      <a href="#!"><strong>五娃</strong></a>
                                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='6'>回复</a>
                                      <time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
                                    </p>
                                    <p>哈哈。</p>
                                  </div>
                                </div>
                              </li>
                            </ul>
                            
                          </div>
                        </div>
                      </li>
                    </ul>
                                  
                  </div>
                </div>
              </li>
              
              <li>
                <div class="d-flex lyear-message-item">
                  <a href="#!"><img src="{$xpConfig['web_static']}/example/images/users/avatar-6.png" class="avatar-box avatar-md rounded-circle" alt="六娃"></a>
                  <div class="flex-grow-1 ms-2">
                    <p>
                      <a href="#!"><strong>六娃</strong></a>
                      <a href="#!" class="text-muted ms-1 reply-btn" data-id='1'>回复</a>
                      <time class="text-muted" datetime="2018-07-14 20:00">3 小时前</time>
                    </p>
                    <p>哎，我也一样啊，隐身能干些啥。</p>
                  </div>
                </div>
              </li>
              
            </ul>
            <form class="lyear-message-form" id="respond-form">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" alt="笔下光年" class="avatar-box avatar-md rounded-circle" />
              <input class="form-control" type="text" placeholder="输入您想说的话">
              <a class="message-btn-close me-2" href="#!"><i class="mdi mdi-close"></i></a>
              <a class="message-btn-send" href="#!"><i class="mdi mdi-near-me"></i></a>
              <input type='hidden' name='comment_arc_id' value='1' id='comment_arc_id' /> <!--当前文章ID-->
              <input type='hidden' name='comment_parent' id='comment_parent_id' value='0' /> <!--当前回复的评论ID-->
            </form>
            
            </div>
          </div>
      </div>
  
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            // 回复评论
            $(document).on('click', '.reply-btn', function() {
                var parentLi    = $(this).parents('.lyear-message-item').first(),
                    parentID    = $(this).data('id'),
                    respond     = $('#respond-form'),
                    respondHtml = respond.prop("outerHTML");
                
                $("#respond-form").remove();
                parentLi.after(respondHtml);
                $("#comment_parent_id").val(parentID);
                $('#respond-form').find('.form-control').focus();
                $('.message-btn-close').show();
            });
            
            $(document).on('click', '.message-btn-close', function() {
                var respond     = $('#respond-form'),
                    respondHtml = respond.prop("outerHTML");
            
                respond.remove();
                $('.lyear-message-list').after(respondHtml);
                $("#comment_parent_id").val('0');
                $('.message-btn-close').hide();
            });
        });
        </script>